<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>

<body>

    <!-- 下面是地图区 -->
    <div class="layui-main" id="laotang" style="width: 800px; height:600px;"></div>

    <!-- 下面是表头部分 -->
    <div class="layui-main layui-nav">
        <div class="layui-row" style="height: 30px; line-height: 30px;">
            <div class="layui-col-md4">地区</div>
            <div class="layui-col-md2">累计确诊</div>
            <div class="layui-col-md2">最新确诊</div>
            <div class="layui-col-md2">治愈</div>
            <div class="layui-col-md2">死亡</div>
        </div>
    </div>

    <!-- 下面是内容区 -->
    <div class="layui-main">
        <div id="view" class="layui-collapse" lay-accordion>
            <div class="layui-colla-item layui-row">
                <h2 class="layui-colla-title">
                    <span class="layui-col-md4">湖北</span>
                    <span class="layui-col-md2">62032</span>
                    <span class="layui-col-md2">40111</span>
                    <span class="layui-col-md2">20000</span>
                    <span class="layui-col-md2">2000</span>
                </h2>
                <div class="layui-colla-content">
                    <!-- // 某个省的市，比如武汉、孝感、潜江。。。 -->
                    <table class="layui-table" lay-skin="nob">
                        <colgroup>
                            <col width="370">
                            <col width="180">
                            <col width="180">
                            <col width="180">
                            <col>
                        </colgroup>
                        <tbody>
                            <tr>
                                <td>武汉</td>
                                <td>33333</td>
                                <td>33333</td>
                                <td>33333</td>
                                <td>33333</td>
                            </tr>
                            <tr>
                                <td>孝感</td>
                                <td>2222</td>
                                <td>222</td>
                                <td>2222</td>
                                <td>222</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>

    <script src="layui/layui.js"></script>
    <script src="data.js"></script>

    <script id="demo" type="text/html">
        {{#  layui.each(d.newslist, function(index, item){ }}
        <div class="layui-colla-item layui-row">
            <h2 class="layui-colla-title">
                <span class="layui-col-md4">{{ item.provinceName }}</span>
                <span class="layui-col-md2">{{item.confirmedCount}}</span>
                <span class="layui-col-md2">{{item.currentConfirmedCount}}</span>
                <span class="layui-col-md2">{{item.curedCount}}</span>
                <span class="layui-col-md2">{{item.deadCount}}</span>
            </h2>
            <div class="layui-colla-content">
                <!-- // 某个省的市，比如武汉、孝感、潜江。。。 -->
                <table class="layui-table" lay-skin="nob">
                    <colgroup>
                        <col width="370">
                        <col width="180">
                        <col width="180">
                        <col width="180">
                        <col>
                    </colgroup>
                    <tbody>
                        {{# layui.each(item.cities, function (i, e) {}}
                        <tr>
                            <td>{{e.cityName}}</td>
                            <td>{{e.confirmedCount}}</td>
                            <td>{{e.currentConfirmedCount}}</td>
                            <td>{{e.curedCount}}</td>
                            <td>{{e.deadCount}}</td>
                        </tr>
                        {{# }); }}
                        
                    </tbody>
                </table>
            </div>
        </div>
        {{#  }); }}
    </script>

    <script>
        layui.use('laytpl', function () {
            var laytpl = layui.laytpl;

            var getTpl = demo.innerHTML
                , view = document.getElementById('view');
            laytpl(getTpl).render(data, function (html) {
                view.innerHTML = html;
            });
        });
    </script>

    <script>
        //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
        layui.use('element', function () {
            var element = layui.element;

            //…
        });
    </script>


    <!-- 引入所需的JS文件 -->
    <script src="echarts.min.js"></script>
    <script src="china.js"></script>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        // 获取真实的数据

        $.get("http://api.tianapi.com/txapi/ncovcity/index?key=5d4fb67d8bd16c1fd371311e334a4bd0",
            function (data, status) {
                // console.log(data); // data就是获取到的数据，输出到控制台查看
                var arr = [];
                // 处理数据，成地图需要的数据结构
                data.newslist.forEach(item => {
                    // 循环的过程中，向空数组中加入所需的内容
                    arr.push({
                        name: item.provinceShortName, // name固定
                        value: item.confirmedCount, // value固定
                        zuixin: item.currentConfirmedCount, // 当前确诊
                        zhiyu: item.curedCount,
                        siwang: item.deadCount
                    });
                });
                // 循环结束之后，我们就得到了地图需要的数据了。数据是arr，但是还稍微有点问题
                // 手动自行添加一个南海诸岛的数据
                arr.push({
                    name: '南海诸岛', // name固定
                    value: '未统计', // value固定
                    zuixin: '未统计', // 当前确诊
                    zhiyu: '未统计',
                    siwang: '未统计'
                });
                // 到此为止，所有的数据全部处理好了。
                console.log(arr);

                // 下面开始做地图
                // 1. 初始化
                var myChart = echarts.init(document.getElementById('laotang'));

                // 2. 配置
                var option = {
                    // 标题部分
                    title: {
                        text: '众志成城，抗击疫情',
                        textStyle: {
                            fontSize: 28
                        },
                        left: 'center', // 左右居中
                        subtext: '传智播客前端与移动开发教研部',
                        subtextStyle: {
                            fontSize: 14
                        }
                    },
                    // 设置地图及数据
                    series: [{
                        type: 'map',
                        map: 'china', // 指定是中国地图
                        data: arr, // 设置地图中的数据
                        label: { // 控制默认显示省的名字
                            show: true
                        }
                    }],
                    tooltip: { // 鼠标悬浮提示
                        formatter: function (params) { // 允许我们自定义悬浮提示的内容
                            console.log(params);
                            // return 你需要提示的内容
                            return `累计确诊：${params.data.value}<br/>
                            当前确诊：${params.data.zuixin}<br/>
                            治愈：${params.data.zhiyu}<br/>
                            死亡：${params.data.siwang}<br/>
                            `;
                        }
                    },
                    visualMap: {
                        type: 'piecewise',
                        pieces: [
                            { gt: 10000 }, // 大于10000
                            { gt: 5000, lte: 10000 },
                            { gt: 1000, lte: 5000 },
                            { gt: 500, lte: 1000 },  // (900, 1500]
                            { gt: 100, lte: 500 },  // (310, 1000]
                            { gt: 10, lte: 100 },   // (200, 300]
                            { gt: 0, lte: 10 },       // (0, 10]
                        ],
                        inRange: {
                            color: ['#ffcfc3', '#eda595', '#d27b64', '#d5462a', '#a8352e', '#6a211d', '#562a2a']
                        }
                    }
                };

                // 3. 生成地图
                myChart.setOption(option);
            });

    </script>
</body>

</html>